<template>
  <div>
    <nav-bar>
      <template v-slot:left>
        <div class="left" @click="backClick">
          <img src="../../../assets/images/common/back.svg" alt="">
        </div>
      </template>
      <template v-slot:center>
          <div class="center">
            <div v-for="(item,index) in titles" :key="index" 
            @click="titleClick(index)" :class="{activeTitle:currentIndex === index}"
            >{{item}}</div>
          </div>
      </template>
    </nav-bar>
  </div>
</template>

<script>
//顶部导航栏组件引入
import NavBar from "components/common/navbar/NavBar.vue";

export default {
  name:"DetailNavBar",
  data(){
    return {
      titles:['商品','参数','评论','推荐'],
      currentIndex:0
    }
  },
  components:{
    NavBar
  },
  methods:{
    titleClick(index){
      this.currentIndex = index
      this.$emit('navBarClick',index)
    },
    backClick(){
      this.$router.go(-1)//返回上次的url
    }
  }
}
</script>

<style scoped>
   .left {
     cursor: pointer;
   }

   .left  img {
     width: 22px;
     height: 22px;
   }

   .center {
     display: flex;
     justify-content: space-around;
   }
   .center div {
     flex:1;
     font-size: 16px;
   }
   .activeTitle {
     color:var(--color-high-text)
   }
</style>